Ext.define('Admin.view.waterOptimum.submodule.highchartPanel',{
	extend:'Ext.panel.Panel',
	xtype:'wohighchart',
	alias:'wohighchart',
	require:[],
	user:[],
	userCLs:'big-100 small-100',
	layout: {
        type: 'hbox',
        align: 'stretch'
    },
	padding: '0 0 0 0',
	chartTitle: 'Default',
	border: true,
	generateUUID:function(){
		var d = new Date().getTime();
		var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
		  var r = (d + Math.random()*16)%16 | 0;
		  d = Math.floor(d/16);
		  return (c=='x' ? r : (r&0x3|0x8)).toString(16);
		});
		return uuid;
	},
	chartId: null,
	chartBody: null,
	chartReady: false,
	chartConfig: {
		title: {
	        text: ' '
	    },
		xAxis: {
	        categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
	    },
		yAxis: [{
	        title: {
	            text: 'y1'
	        }
	    }],
	    tooltip: {
	        shared: true,
	        crosshairs: true,
	        valueDecimals: 3
	    },
		series: [{
	        name: 'x1',
	        data: []
	    }, {
	        name: 'x2',
	        data: []
	    }]
	},
	setChartConfig: function(chartConfig){
		this.chartConfig = chartConfig;
	},
	getChartId: function(){
		return this.chartId;
	},
	getChartBody: function(){
		return this.chartBody;
	},
	randomValue: function(){
		return Math.random() * 100;
	},
	randomValuePack: function(length){
		var output = new Array();
		for(var i=0;i<length;i++){
			output.push(this.randomValue());
		}
		return output;
	},
	chartDraw: function(config){
		var chart = this;
		this.chartConfig = config;
		if(this.chartReady){
			if(this.chartBody != null)this.chartBody.destroy();
			this.chartBody = Highcharts.chart(chart.chartId, this.chartConfig);			
		}
	},
	items:[{
		xtype: 'panel',
		flex: 1
	}],
	listeners: {
		resize: {
			fn: function(obj, width, height, eOpts){
				$("#"+this.chartId).width(width);
				$("#"+this.chartId).height(height);
				if(this.chartBody != null)this.chartBody.reflow();
			}
		},
		boxready: {
			fn: function(obj, width, height, eOpts){
				this.chartReady = true;
				var uuid = this.generateUUID();
				this.chartId = "wc"+uuid;
				var panel = this.query('panel');
				panel[0].setHtml('<div id="'+this.chartId+'" style="width:100%; height:100%;"></div>');
				$("#"+this.chartId).width(width);
				$("#"+this.chartId).height(height);
				this.chartDraw(this.chartConfig);
			}
		}
	}
});